<!-- 消息列表 组件-->
<template>
	<view class="flex align-center p-2 border-bottom border-light-secondary animate__animated animate__fadeIn"
	 hover-class="bg-light" @click="openUserChat">
		<!-- 用户头像 -->
		<image 
	     :src="item.avatar==''?'/static/default.jpg':item.avatar"
		 style="height: 80rpx;width: 80rpx;" class="rounded-circle mr-2 bg-secondary"></image>
		<view class="flex flex-column flex-1 ">
			<view class="flex align-center justify-between">
				<!-- 用户昵称 -->
				<text class="font-md">{{item.username}}</text>
				<!-- 时间戳，使用vue过滤器 -->
				<text class="font-sm text-secondary">{{item.update_time|formatTime}}</text>
			</view>
			<view class="flex align-center justify-between">
				<!-- 内容 -->
				<text class="text-secondary text-ellipsis" style="max-width: 500rpx;">{{item.data}}</text>
				<!-- 消息未读个数 -->
				<uni-badge :text="item.noread" type="error"></uni-badge>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入时间转换库
	import $T from '@/common/time.js'
export default{
	props:{
		item:Object,
		index:Number
	},
	// 过滤器 ------------------------------------------------------
	filters:{
		formatTime(value){
			return $T.gettime(value)
		}
	},
	methods:{
		// 打开聊天页
		openUserChat(){
			let user = {
				user_id:this.item.user_id,
				username:this.item.username,
				userpic:this.item.avatarImg
			}
			uni.navigateTo({
				url:'../../pages/friend-list/user-chat/user-chat?user='+JSON.stringify(user),
				success: () => {
				
					console.log('msg-list',this.item);
					// 清除未读数，更新底部导航消息数显示
					this.$store.dispatch('readChatMessage',this.item)
				}
			})
		}
	}
}
</script>

<style>
</style>